{include file="public/mobileheader"}
<style>
    body{
        padding-bottom: 3em;
    }

    .hm-description>li {
        font-size: 14px;
        color: #8f8f94;
    }
    .mui-icon{
        display: inline-block;
        text-align: center;
    }
    .item{
        display: inline-block;
        text-align: center;
        width: 23%;
    }
    .bar-fix{
        bottom: 0;
    }
    nav > a{
        color: #929292;
    }
    .head-img {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border-radius: 2px;
    }
    .center-top{
        padding:45px 9px 2px;
        background: #00ccff;
    }
    .padding1{
        padding-top: 9px;
        color: white;
    }
    .padding2{
        padding-top: 5px;
    }

    .small-list{
        height: 70px;
        border-bottom: 1px solid grey;
        padding-buttom: 50px;
        text-align: center;
    }
    .small-list>a{
        color: #00ccff;
        display: inline-block;
        width: 32%;
        background: white;
        height: 65px;
        text-align: center;
        padding-top: 9px;
    }
    .margin-top{
        margin-top: 1.5em;
    }
</style>

<body>
    <header id="header" class="mui-bar mui-bar-transparent">
        <span class="mui-pull-left padding1">我的</span>
        <span class="mui-pull-right padding1">设置</span>
    </header>

    <div class="center-top">
        <a href="www.baidu.com">
            <span class="mui-icon mui-icon mui-icon-arrowright mui-pull-right"></span>
            <img class="mui-media-object mui-pull-left head-img" src="/static/img/yuantiao.jpg">
            <div class="mui-media-body padding2">
                Hello MUI
                <p class='mui-ellipsis'>账号:hellomui</p>
            </div>
        </a>
    </div>

    <div class="small-list">
        <a href="">
            <div class="j-bar border-right">
                <div>
                    <span>666666</span><br>
                    <span>账户余额</span>
                </div>
            </div>
        </a>
        <a href="">
            <div class="j-bar border-right">
                <div>
                    <span>6666</span><br>
                    <span>我的订单</span>
                </div>
            </div>
        </a>
        <a href="">
            <div class="j-bar border-right">
                <div>
                    <span>666666</span><br>
                    <span>下级订单</span>
                </div>
            </div>
        </a>
    </div>

    <div class="margin-top">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-danger">15</span>
                    授权信息
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-purple">5</span>
                    我的代理
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    微信授权
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    用户管理
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    拿货咨询
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    用户须知
                </a>
            </li>
        </ul>
    </div>

    <div class="margin-top">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-danger">15</span>
                    系统公告
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-purple">5</span>
                    修改密码
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <span class="mui-badge mui-badge-warning">5</span>
                    退出登录
                </a>
            </li>
        </ul>
    </div>

    <nav style="text-align: center;" class="mui-bar bar-fix">
        <a class="item mui-active" href="{:url('mobile/index')}">
            <span style="padding: 0;" class="mui-icon mui-icon-home"></span><br>
            <span class="">首页</span>
        </a>
        <a class="item" href="">
            <span style="padding: 0;;" class="mui-icon mui-icon mui-icon-navigate"></span><br>
            <span class="">拿货</span>
        </a>
        <a class="item" href="{:url('mobile_agent/index')}">
            <span style="padding: 0;;" class="mui-icon mui-icon mui-icon-bars"></span><br>
            <span class="">代理</span>
        </a>
        <a style="color: #007aff;" class="item" href="{:url('')}">
            <span style="padding: 0;;" class="mui-icon mui-icon-contact"></span><br>
            <span class="">我的</span>
        </a>
    </nav>
</body>
{include file="public/mobilefooter"}
</html>